<template>
    <el-dialog
        title="学生二维码"
        width="600"
        :visible.sync="dialogVisible"
        @close="$emit('update:visible',false)">
      <div class="previewlogBody"
           v-loading="codeloading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.6)">
        <div class="applycode savebox" ref="imageDom">
          <div class="apply-code-title">
            <p class="getcode">{{ qrcodeInfo.title ? qrcodeInfo.title : '--' }}</p>
            <p class="getcode-small">{{ studentoption && studentoption.classes ? studentoption.classes.class_name : '--' }}</p>
            <div class="apply-code-img">
              <div id="qrcode"></div>
            </div>
          </div>
        </div>
        <div class="primaryBtn">
          <el-button type="primary" size="small" @click="downloadIamge">下载二维码</el-button>
        </div>
      </div>
    </el-dialog>
  </template>
  <script>
  import html2canvas from 'html2canvas'
  import QRCode from "qrcodejs2";
  import {mapActions, mapGetters} from "vuex";
  import {systemIndex} from '@/api/admin/system';

  export default {
    name: 'previewImgDialog',
    props: ['visible', 'studentoption', 'type'], // codetype: 1, // 1 通知 2 问卷 // listId id
    watch: {
      visible() {
        this.dialogVisible = this.visible
        if (this.visible) {
          console.log('studentoption',this.studentoption)
          if (this.studentoption !== 'special') {
            this.qrcodeInfo.title = `${this.studentoption.name}【ID:${this.studentoption.id}】`
            this.qrcodeInfo.student_id = this.studentoption.id
            this.qrcodeInfo.link = 'studentCode'
          }else{
            // console.log('studentoption 2222')

            this.qrcodeInfo.title = this.typeTitle[this.type].name;
            this.qrcodeInfo.link = this.typeTitle[this.type].link
          }
          this.qrcode()
        } else {
          document.getElementById("qrcode").innerHTML = "";
          this.infoForm = null
        }
      }
    }
    ,
    data() {
      return {
        dialogVisible: this.visible,
        imgUrl: '',
        codeloading: true,
        codeQrcode: null,
        infoForm: null,
        oldClass: {}, // 未处理的班级
        oldsection: {}, // 未处理的年段
        editStudent_id: [],
        editsection_id: [],
        schooName: '--',
        typeTitle:{
          'food': {name:'职工餐评', link: 'foodPoint'}
        },
        qrcodeInfo: {
          title: '',
          student_id: '',
          link: ''
        }
      }
    }
    ,
    created() {
    }
    ,
    computed: {
      ...mapGetters(['userInfo']),
    }
    ,
    mounted() {

    }
    ,
    methods: {
      // 生成二维码
      qrcode() {
        // 此处需要区分 问卷 通知
        let self_ = this;
        systemIndex({}).then(response => {
          new QRCode('qrcode', {
            width: 220,
            height: 220, // 高度
            text: `${response.vo.url}/workers/#/?id=${this.qrcodeInfo.student_id}`
          })
          this.schooName = response.vo.name
          setTimeout(() => {
            self_.html2canvasFn()
          }, 100)
        })
      },
      html2canvasFn() {
        let self_ = this
        let opts = {
          useCORS: true
        }
        html2canvas(self_.$refs.imageDom, opts).then(canvas => {
          let image = new Image()
          image.onload = function () {
            self_.imgUrl = canvas.toDataURL('image/png')
            self_.codeloading = false
          }
          image.src = canvas.toDataURL('image/png')
        })
      },
      downloadIamge() { // 下载图片地址和图片名
        let image = new Image()// 解决跨域 Canvas 污染问题
        let this_ = this
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function () {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
          let a = document.createElement('a') // 生成一个a元素
          let event = new MouseEvent('click') // 创建一个单击事件
          a.download = `${this_.studentoption.classes.class_name} ${this_.studentoption.name}-学生二维码` || 'photo' // 设置图片名称
          a.href = url // 将生成的URL设置为a.href属性
          a.dispatchEvent(event) // 触发a的单击事件
        }
        image.src = this.imgUrl
      }
    }
  }
  </script>
  <style scoped>
  .applycode{
    background: #f4f4f4;
    padding-top:40px;
  }
  .apply-code-title {
    top: 30px;
  }
  .previewlog {
    padding: 20px 0;
  }

  .previewlogBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }



  .saveimgBg {
    width: 100%;
    display: block;
  }

  .primaryBtn {
    padding: 20px 0;
  }

  .getcode {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
  .getcode-small{
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #333;
  }
  .apply-code-img {
    width: 240px;
    margin: 10px auto 0;
    background: #fff;
    overflow: hidden;
    border: 1px solid #eee;
  }

  .apply-code-img img {
    margin: 10px;
  }
  </style>

